<template>
  <el-drawer
    v-model="isShowDialog"
    :destroy-on-close="true"
    direction="rtl"
    size="78%"
  >
    <template #default>
      <div v-if="type === FileTypeEnum.IMG" class="img-wrap">
        <div>
          <el-image
            fit="cover"
            :initial-index="0"
            :preview-src-list="srcList"
            :src="src"
          />
        </div>
      </div>
      <div v-else-if="type === FileTypeEnum.PDF">
        <iframe id="pdf-wrap" :src="src" />
      </div>
      <div v-else>该文件不可预览</div>
    </template>
  </el-drawer>
</template>

<script setup>
  import { baseURL } from '@/config'
  import { FileTypeEnum } from '@/plugins/commonType.enum'
  const props = defineProps({
    type: {
      type: String,
      default: '',
    },
    filePath: {
      type: String,
      default: '',
    },
  })
  const isShowDialog = ref(false)
  const show = () => {
    isShowDialog.value = true
  }

  const src = computed(() => {
    return `${baseURL}/${props.filePath}`
  })

  const srcList = computed(() => {
    return [src.value]
  })
  defineExpose({
    show,
  })
</script>

<style lang="scss" scoped>
  .img-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    height: 100%;
    margin: 0 auto;
  }

  .pdf-wrap {
    width: 70%;
    height: 100%;
    margin: 0 auto;
  }
</style>
